<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script>
    <script src="./js/my-pre.js"></script>
</head>
<body>
    <div id="app">
        <h1>bus空实例实现</h1>
       {{message}}
       <com-a></com-a>
       <my-pre :init-string="string1"></my-pre>
       <hr>
       <h1>父链</h1>
       <h3>在子组件中,使用ths.$parent可以直接方位该组件的父实例或组件.父组件也可以this.$children访问它所有的子组件.</h3>
       {{message2}}
        <com-b></com-b>
        <my-pre :init-string="string2"></my-pre>
        <hr>
        <h1>子组件的索引,用ref属性来为子组件指定一个索引名称</h1>
        <button @click="handleRef">通过ref获取子组件实例</button>
        <com-c ref="comA"></com-c>


    </div>
    
    <script>
        var bus = new Vue();
        Vue.component('com-a',{
            template:'<button @click="handleEvent">传递事件</button>',
            methods:{
                handleEvent (){
                    bus.$emit('on-message','来自组件com-a的内容')
                }
            }
        });

        Vue.component('com-b',{
            template:'<button @click="handleEvent2">通过父链直接修改数据</button>',
            methods:{
                handleEvent2:function(){
                    //得到父的数据
                    alert(this.$parent.message2);
                    //直接修改父的数据
                    this.$parent.message2='来自组件com-a的内容'
                }
            }
        })

        Vue.component('com-c',{
            template:'<div>组件内容</div>',
            data(){
                return {
                    message:'子组件内容'
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                message:'',
                message2:'我是父的数据',
                string1:hereDoc(function(){/*
                    html里
                     {{message}}
                        <com-a></com-a>
                        <my-pre :init-string="string1"></my-pre>
                        
                        javascripit 里

                        var bus = new Vue();
                            Vue.component('com-a',{
                                template:'<button @click="handleEvent">传递事件</button>',
                                methods:{
                                    handleEvent (){
                                        bus.$emit('on-message','来自组件com-a的内容')
                                    }
                                }
                            });
                                app实例里:
                             mounted:function(){
                                    var _this = this;
                                    bus.$on('on-message',function(msg){
                                        _this.message = msg;
                                    })
                                }

                */}),
                string2:hereDoc(function(){/*
                    html
                     {{message2}}
                         <com-b></com-b>
                    javascript
                        Vue.component('com-b',{
                        template:'<button @click="handleEvent2">通过父链直接修改数据</button>',
                        methods:{
                            handleEvent2:function(){
                                //得到父的数据
                                alert(this.$parent.message2);
                                //直接修改父的数据
                                this.$parent.message2='来自组件com-a的内容'
                             }
                        
                                }
                            })

                    实例

                */})
            },
            mounted:function(){
                var _this = this;
                bus.$on('on-message',function(msg){
                    _this.message = msg;
                })
            },
            methods:{
                handleRef(){
                    //通过$refs访问指定的实例
                    var msg = this.$refs.comA.message;
                    alert(msg)
                }
            }
        })
    </script>
    
</body>
</html>